import { XHSAppLayout } from "@/ui/cpts/std/layouts/XHSAppLayout";
import { XHSAppSidebar } from "@/ui/cpts/biz/XHSAppSidebar";
import { SidebarProvider } from "@shadcn/sidebar";
import { XHSNotes } from "@/ui/cpts/biz/XHSNotes";
import { XHSTalks } from "@/ui/cpts/biz/XHSTalks";
import { XHSToolkits } from "@/ui/cpts/biz/XHSToolkits";
import { GlobalModel } from "@/ui/context";
import styled from "styled-components";
import { LoadingOutlined } from "@ant-design/icons";
import { useViewModel } from "./model.view";
import { XHMLoginModal } from "./components/XHMLoginModal";

const LoadingBlock = styled.div`
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 20px;
`;

const Holder = styled.div`
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
`;

const NeedRHChromium = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;

  strong {
    color: red;
    margin: 0 4px;
  }
`;

export function XHSApp() {
  const { loading, globalModel, hasRHChromium, form, onLoginClick, logining } =
    useViewModel();

  if (loading) {
    return (
      <LoadingBlock>
        <LoadingOutlined style={{ fontSize: 50, marginBottom: 20 }} />
        <div>加载中</div>
      </LoadingBlock>
    );
  }

  if (!hasRHChromium) {
    return (
      <NeedRHChromium>
        本应用依赖<strong>RHChromium</strong>，请先安装
        <strong>RHChromium</strong>再执行本程序
      </NeedRHChromium>
    );
  }

  return (
    <GlobalModel.Provider value={globalModel}>
      <XHSAppLayout
        areaA={
          <SidebarProvider>
            <XHSAppSidebar />
          </SidebarProvider>
        }
        areaB={<XHSNotes />}
        areaC={
          globalModel.discussion ? <XHSTalks /> : <Holder>未选择笔记</Holder>
        }
        areaD={<XHSToolkits />}
      />
      {!globalModel.user && (
        <XHMLoginModal
          onLoginClick={onLoginClick}
          form={form}
          logining={logining}
        />
      )}
    </GlobalModel.Provider>
  );
}
